import {lazy,Suspense}from 'react'
import {useRoutes} from 'react-router-dom'
import Loading from '../components/Loading';
import NotFound from "../components/404";
const Login = lazy(() => import("../pages/login"))
const Main = lazy(() => import("../pages/main"))
const About = lazy(() => import("../pages/main/about"))
const Home = lazy(() => import("../pages/main/home"))
const List = lazy(() => import("../components/List"))
const load = (Comp) => {
    return (
        <Suspense fallback={<Loading />}>
        <Comp />
      </Suspense>
    )
}
const routes = [
    {
        path : '/login',
        element : load(Login)
    },{
        path : '/main',
        element :  load(Main),
        children:[
            {
                path : '/main/about',
                element :  load(About)
            },{
                path : '/main/home',
                element :  load(Home),
                children:[
                    {
                        path : '/main/home/news/:id',
                        element :  load(List)
                    },{
                        path : '/main/home/hobby/:id',
                        element : load(List)
                    },
                ]
            },
        ]
    },{
        path : '/login',
        element : load(Login)
    },{
        path : '/',
        element : load(Login)
    },{
        path : '/*',
        element : load(NotFound)
    },
]
export default routes;

export const GetRoutes = () =>{
    return useRoutes(routes)
}

